<div class="recharge-form-warper">
    <form nz-form nzLayout="vertical">
      <nz-form-item>
        <nz-form-label class="form-code">
          <label>充值金额</label>
        </nz-form-label>
      </nz-form-item>
      <nz-form-item>
        <nz-input-group [nzSuffix]="suffixIconSearch">
          <input type="text" #inputElement nzSize="large" name="amount" [ngModel]="amount" nz-input class="code-input" (ngModelChange)="onChange($event)" (blur)="onBlur()" />
        </nz-input-group>
        <ng-template #suffixIconSearch>
          人民币
        </ng-template>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="form-code">
          <label>关联码</label>
        </nz-form-label>
      </nz-form-item>
      <nz-form-item>
        <!-- <nz-input-number formControlName="amount" name="amount"></nz-input-number> -->
        <input type="text" #verifyElement nzSize="large" name="verifyCode" [ngModel]="verifyCode" (ngModelChange)="changeVerifyCode($event)" nz-input class="code-input"  />
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="form-bank">
          <label>收款账户信息<a class="select-other fr" (click)="showBanks()">选择其他账号</a></label>
          <div class="form-bank-text">
            <p>账号：{{ activeBank.bankAccountNum }}</p>
            <p>户主：{{ activeBank.bankAccountName }}</p>
            <p>银行：{{ activeBank.bankName }}</p>
            <p>支行：{{ activeBank.bankSubBranch }}</p>
          </div>
        </nz-form-label>
      </nz-form-item>
      <nz-form-item>
          <nz-form-label class="form-code">
            <label>备注</label>
          </nz-form-label>
        </nz-form-item>
        <nz-form-item>
          <textarea nz-input name="remark" [(ngModel)]="remark" rows="5" placeholder="请输入您转账的账号和户名"></textarea>
        </nz-form-item>
      <nz-form-item class="recharge-btn-box">
        <button nz-button class="submit" nzType="primary" type="button" (click)="onSubmit()">提交异常充值订单</button>
      </nz-form-item>
    </form>
  </div>
  
  <nz-modal nzWidth="466px" class="banks-modal" [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="null" [nzClosable]="false" (nzOnCancel)="handleCancel()">
    <ng-template #modalTitle>
      <h4>选择收款银行</h4>
    </ng-template>
  
    <ng-template #modalContent>
      <ul class="bank-info-list">
        <li class="form-bank-text" *ngFor="let item of banks" [ngClass]="{ active: item.bankAccountNum == tempBank.bankAccountNum }" (click)="selectBank(item)">
          <p>账号：{{ item.bankAccountNum }}</p>
          <p>户主：{{ item.bankAccountName }}</p>
          <p>银行：{{ item.bankName }}</p>
          <p>支行：{{ activeBank.bankSubBranch }}</p>
        </li>
      </ul>
      <div class="from-footer">
        <button nz-button nzType="primary" (click)="handleOk()">确认</button>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
      </div>
    </ng-template>
  </nz-modal>
  